Skip to main content

Sber Elementor Elearning

Данный файл содержит общее описание плагина. Более подробная информация находится в директории docs

Описание плагина​

Sber Elementor eLearning — плагин для интеграции с Elementor, предназначенный для создания и управления онлайн-курсами и образовательным контентом.

Основные функции:

  • Интеграция с Elementor: Добавление и настройка учебных модулей через визуальный интерфейс.
  • Кастомизация виджетов: Виджеты для создания квизов и управления контентом курса
  • Состояния элементов: Управление состояниями (выделенные, посещенные, активные и т.д.).
  • Условия отображения: Адаптация контента в зависимости от устройств и триггеров.
  • Триггеры и действия: Автоматизация взаимодействия с пользователем через систему триггеров.

Технические особенности:

  • Использование библиотеки WP2 Wrapper для управления состоянием курса. Страницы курса собираются вместе с WP2 Wrapper при помощи модуля StaticBuilder
  • Использование JavaScript, SCSS, Alpine.js.
  • Кастомные виджеты и контроллеры на JavaScript.
  • Работа с WordPress Core, Elementor и системой локализации.

Для кого:

  • Разработчики WordPress плагинов и тем: Плагин предоставляет гибкие возможности интеграции с Elementor и WordPress, что позволяет разработчикам создавать кастомные решения для образовательных сайтов с минимальными усилиями.
  • Создатели образовательных платформ: Разработчики, создающие образовательные платформы или сайты с обучающим контентом, могут использовать плагин для упрощения создания интерактивных курсов и тестов, интегрируя весь функционал непосредственно в WordPress.

Запуск проекта​

Проект представляет из себя WordPress плагин. Для правильной работы плагина требуются

  • PHP 8.2+
  • WordPress 6+
  • Elementor + Elementor Pro плагины

Dev запуск​

Требования:

  • PHP 8.2+
  • Node.js 16
  • WordPress 6+
  • Elementor + Elementor Pro плагины

Для установки PHP зависимостей нужно запустить composer i в корне проекта. Для установки фронтенд зависимостей npm i в директории assets.

Фронтенд можно собрать в dev режиме с помощью npm run build:dev. С помощью npm run dev можно запустить watch сервер с автопересборкой файлов

Prod запуск​

Для сборки проекта для продакшена есть /bin/zip.sh скрипт. Он установить prod зависимости composer и npm, уберет все лишние файлы и создаст zip архив плагина для дальнейшей установки

Конфигурация в админке​

Плагин не требует дополнительной конфигурации в админке. Каждый виджет конфигурируется при добавлении на странице в редакторе Elementor.

Описание файлов​

Основные PHP файлы (директория src)​

  • AlpineRegistrar.php, functions.php, Helpers.php - Вспомогательные PHP файлы для регистрации компонентов и вспомогательных функций.
  • AJAX - Директория для AJAX обработчиков проекта
  • DependenciesInspector - Директория для инспектора зависимостей. Инспектор регистрирует страницу в панели администратора, отображающую состояние расширений и плагинов, которые требуются для работы Elearning плагниа
  • Elementor - Директория, содержащая расширения для Elementor, включая контрольные элементы, секции и триггеры.
    • Categories - регистрация кастомных категорий в редакторе Elementor
    • Controls - элементы управления для использования в виджетах
    • Sections - секции настроек, добавляемые ко всем виджетам в редакторе. Триггеры, условия отображения, состояния
    • Tags - динамические теги
    • Widgets - виджеты Elementor
  • Enums - перечисления плагина
    • AlpineWidget - 4 elearning виджета, null тип заглушка и вспомогательные функции
  • Exceptions - кастомные исключения Elearning плагина
  • PluginBase - Основные классы для управления плагинами, ресурсами и шаблонами.
    • Managers - классы управления плагином
      • ActionsManager - класс для регистрации хуков, которые не получилось отнести в более точечный класс
      • AssetsManager - класс для управления подключением css и js файлов в проекте
      • PluginsManager - класс с методами проверки подключения плагинов
      • SequenceManager - класс для генерации последовательностей строк без повторов
    • Templates
      • Singleton - класс-шаблон для создания синглтон класса
    • Utils - набор классов утилит с вспомогательными функциями
    • ContainerAdminMenuItem - регистрация главного пункта меню плагина и пунктов меню модулей плагина
  • WordPressCore - Основные классы для интеграции с WordPress
    • AdminPages - Админ страницы
    • CPT - регистрация CPT
    • MetaBoxes - регистрация метабоксов
    • Shortcodes - регистрация шорткодов
    • Taxonomies - регистрация таксономий
    • TinyMCE - интеграция с TinyMCE редактором
    • WPKses - фильтр для wp_kses функции

Фронтенд ресурсы (директория assets)​

  • src - Содержит исходные фронтенд файлы, такие как шрифты, изображения, JavaScript и SCSS стили.
    • fonts - Шрифты
    • images - Изображения
    • js - JavaScript код проекта.
      • alpine - Скрипты для работы с Alpine.js, небольшой JavaScript-фреймворк для создания интерактивных интерфейсов.
      • components - Компоненты JavaScript для сборки Elearning виджетов
      • courseControlFunctions - Содержит вспомогательные функции для управления курсами.
      • elementor - Скрипты для интеграции с Elementor
        • contextMenu - Скрипты для добавления пунктов в контекстное меню (открывается правой кнопкой мыши)
        • controls - код для работы кастомных элементов управления в редакторе
        • hooks - хуки редактора для дополнительной логики
      • polyfills - Скрипты для обеспечения поддержки старых браузеров.
      • states - Api для управление состояниями элементов интерфейса.
    • scss - немного файлов стилей
    • webpack - Конфигурации и модули для Webpack, инструмента сборки JavaScript.
      • Parts/BasicPart.js - здесь находится список всех собираемых js файлов

Служебные скрипты (Директория bin)​

  • phpcs.sh - Скрипт для запуска PHP_CodeSniffer для проверки стандартов кода. Запускается с помощью composer
  • zip.sh - Скрипт для упаковки проекта в ZIP-архив. Можно запустить с помощью composer, но лучше запускать напрямую

Системы непрерывной интеграции​

  • .gitlab-ci.yml - конфигурация для запуска CI в GitLab
  • ci/docker_install.sh - Скрипт для установки зависимостей с использованием Docker в среде CI/CD.

Статический анализ PHPcs и Rector​

Анализ кода производится автоматически с помощью PHP библиотек PHPcs и Rector. Для упрощения запуска в composer.json добавлены скрипты. Скрипт для запуска всех линтеров code:fix

PHPcs​

Проверяет стиль написания кода на соответствие стандартам WordPress с частичными послаблениями описанными в файле ruleset.xml

  • phpcs - вывод краткой информации об ошибках
  • phpcs:full - вывод подробной информации об ошибках
  • phpcs:fix - автоматическое исправление ошибок

Rector​

Проверяет логику кода и производит автоматический рефакторинг кода. Конфигурация библиотеки находится в файле rector.php

  • rector:dry - вывод информации об ошибках
  • rector:fix - автоисправление ошибок

Перевод плагина​

Все строки в плагине пишутся на английском языке с применением языковых WP функций (codex). В js коде для перевода нужно использовать i18n.js библиотеку, например wp.i18n.__('Copy id', 'sber-elementor-elearning'), важно использовать полный путь до функции перевода, чтобы она не была минимизирована webpack'ом и могла быть считана при подготовке перевода. Домен перевода соответствует имени плагина sber-elementor-elearning.

Composer скрипты для генерации файлов перевода:

  • make-pot - генерация шаблонного файла перевода
  • update-po - обновление всех файлов перевода на основе pot файла. После вызова этого скрипта нужно открыть все обновленные po файлы и проверить, что все строки переведены
  • make-mo - генерация mo файлов на основе po файлов
  • make-mo-json - генерация json файлов для перевода js кода

languages - Директория с файлами локализации, включающая .mo, .po, и .pot файлы для поддержки перевода и работы с различными языковыми версиями.